<template>
  <div class="enterprise-add">
    <el-row>
      <el-form
        ref="form"
        :inline="true"
        :model="params"
        :rules="rules"
        label-width="110px"
      >
        <el-col :span="12">
          <el-form-item label="企业名称" prop="name">
            <el-input v-model="params.name" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="区域" prop="regionId">
            <el-select v-model="params.regionId" style="width: 100%;" clearable>
              <el-option v-for="(item, index) in regionList"
                         :key="index"
                         :label="item.value"
                         :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="企业描述" prop="showContent">
            <el-input
              type="textarea"
              v-model="params.showContent"
              clearable
              :autosize="{ minRows: 2, maxRows: 10}"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="企业宣传图片" prop="showPicUrl">
            <my-upload
              :limit="1"
              :preview="preview"
              @upload="uploadShow"
              @remove="removeUploadShow"
            />
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import MyUpload from '@/components/my-upload'
import api from '@/api'
export default {
  name: "index",
  components: {
    MyUpload
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    regionList: {
      type: Array,
      default: () => []
    },
    row: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    row: {
      deep: true,
      immediate: true,
      handler(data) {
        this.$nextTick(() => {
          if (data && JSON.stringify(data) !== '{}') {
            const {name, showContent, showPicUrl, regionId} = data
            this.params = {
              name,
              showContent,
              showPicUrl,
              regionId
            }
            this.preview = [showPicUrl]
          } else {
            this.params = {
              name: '',
              showContent: '',
              showPicUrl: '',
              regionId: ''
            }
            this.preview = []
            this.$refs.form.resetFields()
          }
        })
      }
    }
  },
  data() {
    return {
      preview: [],
      params: {
        name: '',
        showContent: '',
        showPicUrl: '',
        regionId: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入企业名称' }
        ],
        regionId: [
          { required: true, message: '请选择区域' }
        ],
        showContent: [
          { required: true, message: '请输入企业描述' }
        ],
        showPicUrl: [
          { required: true, message: '请上传企业宣传图片' }
        ]
      }
    }
  },
  methods: {
    // 上传展示图片
    uploadShow (data) {
      this.params.showPicUrl = data[0].url
    },
    // 删除展示图片
    removeUploadShow (data) {
      this.params.showPicUrl = ''
    },
    submit(id, callback) {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return
        let res = {}
        if (!id) {
          res = await api.PM_ENTERPRISE_ADD(this.params)
        } else {
          this.params.id = id
          res = await api.PM_ENTERPRISE_UPDATE(this.params)
        }
        callback(res.code)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .enterprise-add {
    ::v-deep .el-form-item {
      width: 100%;
      .el-form-item__content {
        width: calc(100% - 110px);
        .el-input__inner,
        .el-textarea__inner {
          width: 100%;
        }
      }
    }
  }
</style>
